<template>
	<el-dialog :title="dialogTitle" append-to-body :visible.sync="visible" width="840px" append-to-body>
		<div class="library_role_form" v-loading="loading">
			<el-form size="medium" ref="form" :model="formData" :rules="formRules" label-width="100px">
				<el-form-item label="角色名称" prop="name">
					<el-input v-model="formData.name" :disabled="isLook"></el-input>
				</el-form-item>
				<el-form-item v-for="(item, index) in roleButtonData" :key="index" :label="item.label">
					<el-checkbox-group v-model="item.checked" :disabled="isLook">
						<el-checkbox v-for="(n, i) in item.children" :key="i" :label="n.id" :disabled="n.isDefault">{{ n.name }}</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item label="角色描述" prop="content">
					<el-input type="textarea" v-model="formData.content" :disabled="isLook"></el-input>
				</el-form-item>
			</el-form>
		</div>
		<template slot="footer" v-if="!isLook">
			<el-button size="medium" @click="visible = false">取消</el-button>
			<el-button size="medium" type="primary" @click="handleSubmitForm" :loading="btnLoading">{{ addOrEdit ? '新增' : '修改' }}</el-button>
		</template>
	</el-dialog>
</template>

<script>
import { mapGetters } from 'vuex';
import { getLibraryButtonList } from '@/api/platform/tbRoleButton';
import { queryLibraryRole, addedLibraryRole, updateLibraryRole } from '@/api/data/tbNetRole';
export default {
	props: {
		value: {
			type: Boolean,
			default: false
		},
		data: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	data() {
		return {
			loading: false,
			visible: this.value,
			formData: {},
			formRules: {
				name: [{ required: true, trigger: 'blur', message: '请输入资源库名称' }]
			},
			libraryButton: [],
			checkedButton: [],
			roleButtonData: [],
			btnLoading: false
		};
	},
	computed: {
		...mapGetters(['dictEnums']),
		isLook() {
			return this.data.type === 'look';
		},
		addOrEdit() {
			if (this.data.type === 'add') {
				return true;
			} else {
				return false;
			}
		},
		dialogTitle() {
			return this.isLook ? '查看库角色' : this.addOrEdit ? '添加库角色' : '修改库角色';
		},
		libButtonArr() {
			let roleButtonType = this.dictEnums['DISK_ROLE_BUTTON_TYPE'];
			let roleButton = this.libraryButton.map((item) => {
				let obj = { ...item };
				if (this.addOrEdit) {
					obj['checked'] = this.checkedButton.some((n) => n.id === item.id);
				} else {
					obj['checked'] = this.checkedButton.some((n) => n.buttonId === item.id);
				}
				return obj;
			});
			return roleButtonType.map((item) => {
				let obj = {};
				let typeButtonArr = roleButton.filter((n) => n.type === item.value);
				let checkButtonArr = typeButtonArr.filter((n) => !!n.checked);
				return {
					label: item.msg,
					value: item.value,
					checked: checkButtonArr.map((n) => n.id),
					children: typeButtonArr
				};
			});
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
			if (!flag) return false;
			this.loading = true;
			if (this.addOrEdit) {
				this.getLibraryButtonData();
			} else {
				this.getLibraryRoleDetail();
			}
		},
		libButtonArr(arr) {
			this.roleButtonData = [...arr];
		}
	},
	methods: {
		//获取库按钮数据
		async getLibraryButtonData() {
			let params = { page: 1, limit: 9999 };
			let result = await getLibraryButtonList(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				let datas = !result.data ? [] : result.data;
				this.formData = {};
				this.libraryButton = datas.map((item) => {
					return { ...item, isDefault: item.isSelect === '1' };
				});
				this.checkedButton = datas.filter((item) => item.isSelect === '1');
			}
		},

		//获取库角色详情
		async getLibraryRoleDetail() {
			let result = await queryLibraryRole(this.data.id).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				let datas = !result.data ? {} : result.data[0];
				let libButton = datas.defList.map((item) => Object.values(item)).flat(Infinity);
				this.formData = this.$lodash.omit(datas, ['defList', 'tnbList']);
				this.libraryButton = libButton.map((item) => {
					return { ...item, isDefault: item.isSelect === '1' };
				});
				this.checkedButton = datas.tnbList;
			}
		},

		handleSubmitForm() {
			this.$refs['form'].validate(async (valid) => {
				if (!valid) return false;
				this.btnLoading = true;
				// this.formatRoleParams();
				await this.libraryRoleRequest();
				this.btnLoading = false;
			});
		},

		//格式化提交参数
		formatRoleParams() {
			let params = { ...this.formData };
			let checkedBtnIds = this.libButtonArr.map((item) => item.checked).flat(Infinity);
			if (this.addOrEdit) {
				params['dirId'] = this.data.id;
				params['powerList'] = checkedBtnIds.map((item) => {
					let obj = this.libraryButton.find((n) => n.id === item);
					return { id: item, name: obj.name, type: obj.type, operType: '1', content: obj.content };
				});
			} else {
				let initialChecked = this.checkedButton.map((item) => item.buttonId);
				let diffBtnIds = this.$getArrDifference(checkedBtnIds, initialChecked);
				params['powerList'] = diffBtnIds.map((item) => {
					let obj = this.libraryButton.find((n) => n.id === item);
					let flag = initialChecked.some((n) => n === item);
					return { id: item, name: obj.name, type: obj.type, operType: !flag ? '1' : '2', content: obj.content };
				});
			}
			return params;
		},

		//库角色新增编辑请求
		async libraryRoleRequest() {
			let params = this.formatRoleParams();
			let libraryFun = eval(this.addOrEdit ? addedLibraryRole : updateLibraryRole);
			let result = await libraryFun(params).then((res) => res.data);
			if (result.code === '0') {
				this.visible = false;
				this.$emit('refresh');
				this.$message.success(`${this.addOrEdit ? '添加' : '修改'}库角色成功`);
			} else {
				this.$message.error(`${this.addOrEdit ? '添加' : '修改'}库角色失败`);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.library_role_form {
	flex: 1;
	padding: 16px 16px 0 0;
	overflow: hidden;
	.el-form-item {
		margin-bottom: 16px;
	}
	.el-checkbox-group {
		display: flex;
		flex-wrap: wrap;
	}
	.el-checkbox {
		padding: 11px 0;
	}
}
</style>
